import React, { useEffect } from 'react';
import { message } from 'antd';
import LogicFlow from '@logicflow/core';
import { InsertNodeInPolyline, DndPanel } from '@logicflow/extension';
import ExampleHeader from '../../../../components/example-header';
import { Square } from '../square';

const config = {
  stopScrollGraph: true,
  stopZoomGraph: true,
  style: {
    circle: {
      r: 40
    }
  }
};

const data = {
  nodes: [
    {
      id: 10,
      type: 'square',
      x: 150,
      y: 150,
      text: '正方形'
    },
    {
      id: 101,
      type: 'square',
      x: 250,
      y: 250,
      text: '正方形1'
    },
    {
      id: 20,
      type: 'circle',
      x: 580,
      y: 70,
      text: '圆形'
    },
    {
      id: 201,
      type: 'circle',
      x: 780,
      y: 200,
      text: '圆形1'
    },
    {
      id: 202,
      type: 'circle',
      x: 480,
      y: 170,
      text: '圆形2'
    },
    {
      id: 30,
      type: 'diamond',
      x: 380,
      y: 230,
      text: '其他节点'
    },
  ]
};

export default function CustomNodeEdgeExample() {

  useEffect(() => {
    LogicFlow.use(InsertNodeInPolyline);
    LogicFlow.use(DndPanel);
    const lf = new LogicFlow({
      ...config,
      container: document.querySelector('#graph') as HTMLElement
    });
    lf.register(Square);
    lf.extension.dndPanel.setPatternItems([
      {
        type: 'circle',
        label: "圆形节点",
        icon:
          ""
      },
      {
        type: 'diamond',
        label: '菱形节点',
        icon: ''
      }
    ]);
    lf.render(data);
    lf.on('connection:not-allowed', (res: any) => {
      message.error(res.msg)
    })
  }, []);

  return (
    <>
      <ExampleHeader
        content="正方形的下一个节点只能是圆形节点，边上插入节点的时候也会校验"
        githubPath="/advance/custom-node/rule/index.tsx"
      />
      <div id="graph" className="viewport" />
    </>
  )
}
